<template>
  <div id="bigDiv">
    <head-2/>
    <beginView
      :textInfo="this.textInfo"
      @isOpen="getOpen"
      v-if="this.isOpend==1"
    />
    <div id="bigTitle">请找出它们的规律</div>
    <div id="countDown">
      倒计时<span id="timeNumber">{{ countDwon }}</span
      >s
    </div>
    <div id="contentDiv">
        <div class="questions" contenteditable="true"></div>
        <div class="questions" contenteditable="true"></div>
        <div class="questions" contenteditable="true"></div>
        <div class="questions" contenteditable="true"></div>
        <div class="questions" contenteditable="true"></div>
      </div>
      <button @click="nextQuestion" id="nextQu">下一题</button>
      <GetScore :userScore="this.userScore" v-if="this.isOpend==4" @onceTime="getOpenOnce"/>
  </div>
</template>

<script>
import head2 from '@/components/Head/head2.vue'
import GetScore from '@/components/getScore/getScore.vue';
import BeginView from '@/components/beginView/beginView.vue';
export default {
  components: { head2,GetScore,BeginView},
  data() {
    return {
      quesArr:[],
      rightNumber1:0,
      rightNumber2:0,
      missNumber1:0,
      missNumber2:0,
      countDwon: 10,
      isOpend: 1,
      isEnd: false,
      textInfo: {
        val: "游戏开始了，加油小朋友",
        textTitlle: "比一比的玩法介绍",
        textContant:
          "小朋友，每次游戏你都有10秒钟的时间进行游戏，加油！！",
      },
      numberLeft: 0,
      numberRight: 0,
      userScore: {
        score: 0,
        allCount: 0,
        rightCount: 0,
        falseCount:0,
        rightRate:0,
        echartId:"compareCount"+new Date()
      },
    }
  },
  watch:{
    isOpend(){
      this.contDwon()
    }
  },
  mounted(){
    this.contDwon()
    this.getNmber()
    this.chageQusetion()
  },
  methods:{
    getRes(){
      this.isOpend=4
    },
    getOpen(val) {
      this.isOpend = val;
    },
    getOpenOnce(val){
      this.isOpend = val;
      this.countDwon=10
      this.userScore.allCount=0
      this.userScore.rightCount=0
      this.userScore.falseCount=0
      this.userScore.rightRate=0

    },
    getOpen(val){
      this.isOpend=val;
    },
    getNmber(){
      var beginNumber=Math.floor(Math.random()*20)
      var chageNumber=Math.floor(Math.random()*4)
      this.missNumber1=Math.floor(Math.random()*5)
      this.missNumber2=Math.floor(Math.random()*5)
      // console.log(beginNumber,benginWayS,chageNumber)
      this.quesArr=[];
      if(beginNumber>12){
        for(var i=0;i<5;i++){
          var number=beginNumber-chageNumber*i
          this.quesArr.push(number)
        }
      }
      else{
        for(var i=0;i<5;i++){
          var number=beginNumber+chageNumber*i
          this.quesArr.push(number)
        }
      }
      this.rightNumber1=this.quesArr[this.missNumber1]
      this.rightNumber2=this.quesArr[this.missNumber2]
      this.quesArr[this.missNumber1]=''
      this.quesArr[this.missNumber2]=''
      setTimeout(()=>{
        this.chageQusetion()
      },1000)
    },
    chageQusetion(){
      var questionsArr=document.getElementsByClassName("questions");
      Array.from(questionsArr).forEach((item,index)=>{
         item.innerHTML=this.quesArr[index]
         item.style.backgroundColor="yellow"
        }
      )
    },
    contDwon() {
      const timer = setInterval(() => {
        this.countDwon--;
        if (this.countDwon <= 0) {
          // this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
          clearInterval(timer);
          this.isOpend=4
          this.isEnd = !this.isEnd;
          // this.isEnd = !this.isEnd;
        }
      }, 1000);
    },
    nextQuestion(){
      var numm=document.getElementsByClassName("questions")
      if(numm[this.missNumber1].innerHTML==this.rightNumber1)
      {
        numm[this.missNumber1].style.backgroundColor="green"
      }
      else{
        numm[this.missNumber1].style.backgroundColor="red"
      }
      if(numm[this.missNumber2].innerHTML==this.rightNumber2)
      {
        numm[this.missNumber2].style.backgroundColor="green"
      }
      else{
        numm[this.missNumber2].style.backgroundColor="red"
      }
      if(numm[this.missNumber1].style.backgroundColor=="green"&&numm[this.missNumber2].style.backgroundColor=="green"){
        this.userScore.rightCount++
      }
      else{
        this.userScore.falseCount++
      }
      this.userScore.allCount=this.userScore.rightCount+this.userScore.falseCount
      this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
      this.getNmber()
    }
  }
}
</script>

<style lang="less" scoped>
#bigDiv{
  height: 100vh;
  #countDown {
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px;
    letter-spacing: 2px;
    #timeNumber {
      color: red;
    }
  }
  #bigTitle {
    font-weight: bold;
    font-size: 22px;
    margin-top: 20px;
    letter-spacing: 3px;
  }
  #nextQu{
    margin-top: -5vh;
    margin-left: -10vw;
    padding: 5px;
    font-size: 17px;
    position:absolute;
  }
  #contentDiv{
    height: 40vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    div{
      width: 15vw;
      height: 15vw;
      line-height: 15vw;
      font-size: 20px;
      background-color: yellow;
    }
  }
}
</style>